<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件</title>
</head>
<body>
    <h1>事件</h1>
    <h2>什么是事件</h2>
    <p>事件是发生在你正在编程系统中的事情--当事件发生时，系统产生（或触发）某种信号，并提供
        一种机制。当事件发生时，可以自动采取某种行为（允许一段代码）
    </p>
    <p>事件在浏览器窗口触发，并倾向于附加到驻留在其中的特定项目
        有可能是一个元素或一组元素 当前标签加载html文档或整个窗口，有许多不同类型的事件发生
    </p>
    <h2>常见事件</h2>
    <p><ul>
        <li>onchange   元素改变</li>
        <li>onclick    点击事件</li>
        <li>onmouserver   鼠标移动到某个指定元素上</li>
        <li>onmouseout   鼠标从某个元素上移开</li>
        <li>onload    加载页面文档</li>
    </ul></p>
    <hr>
    <!--按钮绑定事件 时间作为属性，属性值为某个函数-->
    <button onclick="alert('hello')">按钮1</button><br>
    <!--采用函数方式绑定-->
     <button id="btn">按钮2</button><br>
     <script>
        // 获得元素
        let btn = document.getElementById('btn');
        //函数绑定事件
        btn.onclick=function(){
            alert('hello btn')
        }
     </script>
     <!--事件监听绑定事件-->
      <button class="btn1">按钮3</button><br>
     
      <script>
        //获得元素
         let btn1 =document.getElementsByClassName('btn1')
         //事件监听绑定事件
         btn1[0].addEventListener('click',function(){
          alert('hello  Event Listener')
         })
      </script>
      <!--创建按钮 点击事件 自增1 控制台输出-->
      <button id="up">点我</button>
      <script>
        let btn2 =document.getElementById('up')
         let i =1;
           btn2.onclick=function(){
              i++;
              console.log(i);
           }
       
      </script>
</body>
</html>